<template>
  <div ref="myChart" class="chart">
  </div>
</template>

<script>
// import centreRight2Chart1 from "@/components/echart/centerRight/centerRightChart";

export default {
  data() {
    return {
      myChart: null,
      myChart1: null,
      flowX: ["11:55", "11:56", "11:57", "11:58", "11:59", "20:00"],
      waterLevelX: [],
      flowXData: [820, 932, 901, 934, 1290, 1330, 1320],
      waterLevelXData: [],
      requestType: 0,
    };
  },
  // components: { centreRight2Chart1 },
  mounted() {
    this.drawColumn()
  },
  methods: {
    drawColumn() {
      this.myChart = this.$echarts.init(this.$refs.myChart)
      const start = this.flowX.length > 7 ? this.flowX.length - 7 : 0;
      const end = this.flowX.length > 1 ? this.flowX.length - 1 : 0;
      let option = {
        dataZoom: [{
          show: false,
          startValue: start,
          endValue: end,
        }],
        title: {
          left: 'left',
          text: '流速/水位曲线图',
          textStyle: {
            color: '#fff',
            fontSize: 15
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.flowX,
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#96c4d7"
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#bcdae7",
              height: "0.3"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#315070'],
              width: 1,
              type: 'solid'
            }
          }
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#96c4d7"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#315070'],
                width: 1,
                type: 'solid'
              }
            },
          },

        ],

        series: [
          {
            name: '水流速',
            data: this.flowXData,
            type: "line",
            smooth: true,
            yAxisIndex: 0,
            areaStyle: {
              color: "#5487bb"
            }
          },

        ]
      }
      this.myChart.setOption(option, true);
    },
  }
};
</script>

<style lang="scss">
.chart {
  width: 100%;
  height: 100%;
  margin-top: 5px;
  //background: #0c1b55;
  //opacity:0.5;
}
</style>
